<template>
  <div class="issue-card">
    <div class="title-nav flex align-center flex-between">
      <div class="title">常见问题</div>
      <div class="more" @click="handMore">
        <span>更多</span>
        <i class="esayIcon esayIcon-youjiantou"></i>
      </div>
    </div>
    <div class="coll">
      <div
        class="cell flex hover-shadow"
        v-for="(item, index) in tableData"
        :key="item.id"
        @click="handDetail(item)"
      >
        <div class="title u-line-1">{{ index + 1 }}、{{ item.title }}</div>
        <div class="icon">
          <i class="esayIcon esayIcon-youjiantou"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import helpApi from '@/service/api/help'
import { useRouter } from 'vue-router'
const router: any = useRouter()
interface tableDataItem {
  content: string
  helpCategoryId: number
  id: number
  title: string
}
const handDetail = (e: any) => {
  router.push({
    path: '/helpdetail',
    query: {
      eid: e.id
    }
  })
}

const handMore = () => {
  router.push({
    path: '/help'
  })
}
const tableData = ref<tableDataItem[]>([])
const init = async () => {
  // const { data } = await helpApi.common()
  tableData.value = [
    {
      content: '我是内容',
      helpCategoryId: 1,
      id: 1,
      title: '我是标题'
    },
    {
      content: '我是内容',
      helpCategoryId: 1,
      id: 2,
      title: '我是标题'
    }
  ]
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.issue-card {
  margin-top: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  .title-nav {
    padding: 14px 28px;
    border-bottom: 1px solid #eeeeee;
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #f1423d;
      cursor: pointer;
      i {
        font-size: 14px;
      }
    }
  }
  .coll {
    padding: 10px 28px 31px 28px;
    height: 270px;
    overflow-y: auto;
    .cell {
      align-items: center;
      padding: 10px 10px;
      cursor: pointer;
      .title {
        flex: 1;
        margin-right: 10px;
        font-size: 14px;
      }
      .esayIcon {
        font-size: 14px;
      }
    }
  }
}
</style>
